<template>
    <div class="publicpageview">
        <div class="publicformview">
            <div class='left'>
                <el-button size="mini" type="primary" @click="isnewOne=true">添加新的一级分类</el-button>
                <el-table style="margin-top: 20px;" max-height='680px' :data="OneList" border fit highlight-current-row
                    size="mini">

                    <el-table-column align="center" label="序号" prop="classno">
                        <template slot-scope="scope">
                            <div @click="getClassmid(scope.row.classname)">
                                {{scope.row.classno}}
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column align="center" label="分类名单" prop="classname">
                        <template slot-scope="scope">
                            <div @click="getClassmid(scope.row.classname)">
                                {{scope.row.classname}}
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column align="center" label="明细数值名称">
                        <template slot-scope="scope">
                            <div @click="getClassmid(scope.row.classname)">
                                {{scope.row.classdetailvaluename}}
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column align="center" label="是否数值">
                        <template slot-scope="scope">
                            <div @click="getClassmid(scope.row.classname)">
                                {{scope.row.classdetailvalueisnumber==1?'是':'否'}}
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column align="center" label="中间分类允许修改">
                        <template slot-scope="scope">
                            <div @click="getClassmid(scope.row.classname)">
                                {{scope.row.midallowedit==1?'是':'否'}}
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column align="center" label="操作">
                        <template slot-scope="scope">
                            <el-button type="text" size="mini" @click="delect(scope.row.classid,1)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 弹窗部分 -->
                <el-dialog :title="oneTitle" :visible.sync="isnewOne" width="50%" :before-close="handleClose">
                    <el-form :model="newOne" ref="dataForm" class="demo-ruleForm" label-position="right"
                        label-width="150px">
                        <el-form-item label="序号：" prop="classno">
                            <el-input v-model="newOne.classno"></el-input>
                        </el-form-item>
                        <el-form-item label="分类名称：" prop="classname">
                            <el-input v-model="newOne.classname"></el-input>
                        </el-form-item>
                        <el-form-item label="明细数值名称：" prop="classdetailvaluename">
                            <el-input v-model="newOne.classdetailvaluename"></el-input>
                        </el-form-item>
                        <el-form-item label="是否数值：" prop="classdetailvalueisnumber">
                            <el-select v-model="newOne.classdetailvalueisnumber">
                                <el-option label="是" value="1"></el-option>
                                <el-option label="否" value="0"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="中间分类允许修改：" prop="midallowedit">
                            <el-select v-model="newOne.midallowedit">
                                <el-option label="是" value="1"></el-option>
                                <el-option label="否" value="0"></el-option>
                            </el-select>
                        </el-form-item>
                        <!-- 	<el-form-item label="类型：" prop="kindid">
							<el-select v-model="newOne.kindid">
								<el-option label="产业" value="1"></el-option>
								<el-option label="经营" value="2"></el-option>
								<el-option label="售房" value="3"></el-option>
							</el-select>
						</el-form-item> -->
                    </el-form>

                    <div class="saveContent">
                        <el-button type="primary" @click="oneSave" size="medium">保 存</el-button>
                    </div>
                </el-dialog>
            </div>

            <div class="center" v-if="classname">
                <el-button size="mini" type="primary" @click="isnewTow=true">添加新的中级分类</el-button>
                <el-table style="margin-top: 20px;" max-height='680px' :data="TowList" border fit highlight-current-row
                    size="mini">

                    <el-table-column align="center" label="序号">
                        <template slot-scope="scope">
                            <div @click="getClassdetail(scope.row.classmid)">
                                {{scope.row.sortno}}
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column align="center" label="二级分类">
                        <template slot-scope="scope">
                            <div @click="getClassdetail(scope.row.classmid)">
                                {{scope.row.classmid}}
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column align="center" label="明细允许添加">
                        <template slot-scope="scope">
                            <div @click="getClassdetail(scope.row.classmid)">
                                {{scope.row.detailallowadddelete==1?'是':'否'}}
                            </div>
                        </template>
                    </el-table-column>

                    <!-- <el-table-column align="center" label="操作">
						<template slot-scope="scope">
							<el-button type="text" size="mini" @click="TowDeta(scope.row)">修改</el-button>
						</template>
					</el-table-column> -->

                    <el-table-column align="center" label="操作">
                        <template slot-scope="scope">
                            <el-button type="text" size="mini" @click="delect(scope.row.classmidid,2)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 弹窗部分 -->
                <el-dialog :title="TowTitle" :visible.sync="isnewTow" width="50%" :before-close="handleClose">
                    <el-form :model="newTow" ref="dataForm" class="demo-ruleForm" label-position="right"
                        label-width="150px">
                        <el-form-item label="序号：" prop="sortno">
                            <el-input v-model="newTow.sortno"></el-input>
                        </el-form-item>
                        <el-form-item label="二级分类：" prop="classmid">
                            <el-input v-model="newTow.classmid"></el-input>
                        </el-form-item>
                        <el-form-item label="明细允许添加：" prop="detailallowadddelete">
                            <el-select v-model="newTow.detailallowadddelete">
                                <el-option label="是" value="1"></el-option>
                                <el-option label="否" value="0"></el-option>
                            </el-select>
                        </el-form-item>
                        <!-- 	<el-form-item label="类型：" prop="kindid">
							<el-select v-model="newTow.kindid">
								<el-option label="产业" value="1"></el-option>
								<el-option label="经营" value="2"></el-option>
								<el-option label="售房" value="3"></el-option>
							</el-select>
						</el-form-item> -->
                    </el-form>

                    <div class="saveContent">
                        <el-button type="primary" @click="TowSave" size="medium">保 存</el-button>
                    </div>
                </el-dialog>
            </div>

            <div class="right" v-if='classmid'>
                <el-button size="mini" type="primary" @click="isnewThree=true">添加新的明细分类</el-button>
                <el-table style="margin-top: 20px;" max-height='680px' :data="ThreeList" border fit
                    highlight-current-row size="mini">

                    <el-table-column align="center" label="序号">
                        <template slot-scope="scope">
                            <div>
                                {{scope.row.sortno}}
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column align="center" label="三级分类">
                        <template slot-scope="scope">
                            <div>
                                {{scope.row.detail}}
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column align="center" label="系数值">
                        <template slot-scope="scope">
                            <div>
                                {{scope.row.value}}
                            </div>
                        </template>
                    </el-table-column>

                    <el-table-column align="center" label="明细锁定">
                        <template slot-scope="scope">
                            <div>
                                {{scope.row.detaillock==1?'是':'否'}}
                            </div>
                        </template>
                    </el-table-column>

                    <!-- <el-table-column align="center" label="操作">
						<template slot-scope="scope">
							<el-button type="text" size="mini" @click="ThreesDeta(scope.row)">修改</el-button>
						</template>
					</el-table-column> -->
                    <el-table-column align="center" label="操作">
                        <template slot-scope="scope">
                            <el-button type="text" size="mini" @click="delect(scope.row.classdetailid,3)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 弹窗部分 -->
                <el-dialog :title="ThreeTitle" :visible.sync="isnewThree" width="50%" :before-close="handleClose">
                    <el-form :model="newThree" ref="dataForm" class="demo-ruleForm" label-position="right"
                        label-width="150px">
                        <el-form-item label="序号：" prop="sortno">
                            <el-input v-model="newThree.sortno"></el-input>
                        </el-form-item>
                        <el-form-item label="三级分类：" prop="detail">
                            <el-input v-model="newThree.detail"></el-input>
                        </el-form-item>
                        <el-form-item label="系数值：" prop="value">
                            <el-input v-model="newThree.value"></el-input>
                        </el-form-item>
                        <el-form-item label="明细锁定：" prop="detaillock">
                            <el-select v-model="newThree.detaillock">
                                <el-option label="是" value="1"></el-option>
                                <el-option label="否" value="0"></el-option>
                            </el-select>
                        </el-form-item>
                        <!-- 	<el-form-item label="类型：" prop="kindid">
							<el-select v-model="newThree.kindid">
								<el-option label="产业" value="1"></el-option>
								<el-option label="经营" value="2"></el-option>
								<el-option label="售房" value="3"></el-option>
							</el-select>
						</el-form-item> -->
                    </el-form>

                    <div class="saveContent">
                        <el-button type="primary" @click="ThreeSave" size="medium">保 存</el-button>
                    </div>
                </el-dialog>
            </div>
        </div>
    </div>
</template>

<script>
import {
    getDictionary,
    addDictionary,
    updateWordBook,
    getClassmid,
    addClassmid,
    getClassdetail,
    addClassdetail,
    delClass,
    getClassNewAll
} from '@/api'
export default {
    name: "zidianguanli",

    data() {
        return {
            classname: '',
            classmid: '',
            OneList: [],
            newOne: {
                classno: '',
                classname: '',
                classdetailvaluename: '',
                classdetailvalueisnumber: "",
                midallowedit: '',
                kindid: '4'
            },
            isnewOne: false,
            oneTitle: '添加',
            isnewTow: false,
            TowList: [],
            newTow: {
                sortno: '',
                classmid: '',
                detailallowadddelete: '',
                kindid: '4'
            },
            TowTitle: '添加',
            isnewThree: false,
            ThreeList: [],
            newThree: {
                sortno: '',
                detaillock: '',
                detail: '',
                value: '',
                kindid: '4'
            },
            ThreeTitle: '添加',
        };
    },

    computed: {},

    mounted() {
        this.getList()
    },

    methods: {
        // 一级
        getDictionary() {
            getDictionary().then(res => {
                console.log(res)
                this.OneList = res.data
            })
        },
        oneSave() {
            if (this.oneTitle == '添加') {
                this.addDictionary()
            } else {
                this.updateWordBook()
            }
        },
        addDictionary() {
            let data = this.newOne
            addDictionary(data).then(res => {
                this.$message({
                    type: 'success',
                    message: '操作成功!'
                });
                this.newOne.classid = '',
                    this.newOne.classname = '',
                    this.newOne.classdetailvaluename = '',
                    this.newOne.classdetailvalueisnumber = '',
                    this.newOne.midallowedit = '',
                    this.classname = '',
                    this.classmid = ''
                this.isnewOne = false
                this.getList()
            })
        },
        oneDeta(e) {
            console.log(e)
            let data = JSON.stringify(e)
            this.newOne = JSON.parse(data)
            this.oneTitle = '修改'
            this.isnewOne = true
        },
        updateWordBook() {
            let data = this.newOne
            updateWordBook(data).then(res => {
                this.$message({
                    type: 'success',
                    message: '操作成功!'
                });
                this.newOne.classid = '',
                    this.newOne.classname = '',
                    this.newOne.classdetailvaluename = '',
                    this.newOne.classdetailvalueisnumber = '',
                    this.newOne.midallowedit = '',
                    this.classname = '',
                    this.classmid = '',
                    this.isnewOne = false
                this.getList()
            })
        },

        // 二级
        getClassmid(classname) {
            this.classname = classname
            let data = {
                classname: this.classname
            }
            getClassmid(data).then(res => {
                this.TowList = res.data
                this.classmid = ''
            })
        },
        TowSave() {
            if (this.TowTitle == '添加') {
                this.addClassmid()
            } else {
                this.updateWordBookTow()
            }
        },
        addClassmid() {
            let data = this.newTow
            data.classname = this.classname
            addClassmid(data).then(res => {
                this.$message({
                    type: 'success',
                    message: '操作成功!'
                });
                this.newTow.sortno = '',
                    this.newTow.classmid = '',
                    this.newTow.detailallowadddelete = '',
                    this.classmid = ''
                this.getClassmid(this.classname)
                this.isnewTow = false
                this.getList()
            })
        },
        TowDeta(e) {
            console.log(e)
            let data = JSON.stringify(e)
            this.newTow = JSON.parse(data)
            this.TowTitle = '修改'
            this.isnewTow = true
        },
        updateWordBookTow() {
            let data = this.newTow
            updateWordBook(data).then(res => {
                this.$message({
                    type: 'success',
                    message: '操作成功!'
                });
                this.newTow.sortno = '',
                    this.newTow.classmid = '',
                    this.newTow.detailallowadddelete = '',
                    this.classmid = ''
                this.getClassmid(this.classname)
                this.isnewTow = false
                this.getList()
            })
        },

        //三级
        getClassdetail(classmid) {
            this.classmid = classmid
            let data = {
                classname: this.classname,
                classmid: this.classmid
            }
            getClassdetail(data).then(res => {
                this.ThreeList = res.data
            })
        },
        ThreeSave() {
            if (this.ThreeTitle == '添加') {
                this.addClassdetail()
            } else {
                this.updateWordBookThree()
            }
        },
        addClassdetail() {
            let data = this.newThree
            data.classname = this.classname
            data.classmid = this.classmid
            addClassdetail(data).then(res => {
                this.$message({
                    type: 'success',
                    message: '操作成功!'
                });

                this.newThree.sortno = '',
                    this.newThree.detaillock = '',
                    this.newThree.detail = '',
                    this.newThree.value = '',
                    this.getClassdetail(this.classmid)
                this.isnewThree = false
                this.getList()
            })
        },
        ThreesDeta(e) {
            console.log(e)
            let data = JSON.stringify(e)
            this.newThree = JSON.parse(data)
            this.ThreeTitle = '修改'
            this.isnewThree = true
        },
        updateWordBookThree() {
            let data = this.newThree
            updateWordBook(data).then(res => {
                this.$message({
                    type: 'success',
                    message: '操作成功!'
                });
                this.newThree.sortno = '',
                    this.newThree.detaillock = '',
                    this.newThree.detail = '',
                    this.newThree.value = '',
                    this.getClassdetail(this.classmid)
                this.isnewThree = false
                this.getList()
            })
        },


        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                    this.newOne.classid = '',
                        this.newOne.classname = '',
                        this.newOne.classdetailvaluename = '',
                        this.newOne.classdetailvalueisnumber = '',
                        this.newOne.midallowedit = ''
                })
                .catch(_ => { });
        },
        delect(id, level) {
            let data = {
                id: id,
                level: level
            }
            delClass(data).then(res => {
                this.$message({
                    type: 'success',
                    message: '操作成功!'
                });
                if (level == 1) {
                    this.classname = '';
                    this.classmid = '';
                    this.getList();
                } else if (level == 2) {
                    this.getClassmid(this.classname)
                    this.classmid = ''
                } else if (level == 3) {
                    this.getClassdetail(this.classmid)
                }
            })
        },
        getList() {
            getClassNewAll({ kindId: 4 }).then(res => {
                localStorage.setItem('xiushan', JSON.stringify(res.data))
                this.OneList = res.data
            })
            // getClassNewAll({kindId:2}).then(res=>{
            // 	localStorage.setItem('jinying', JSON.stringify(res.data))
            // })
            // getClassNewAll({kindId:3}).then(res=>{
            // 	localStorage.setItem('shoufang', JSON.stringify(res.data))
            // })
        }
    },
};
</script>
<style scoped>
.publicformview {
    display: flex
}

.saveContent {
    width: 100%;
    display: flex;
    justify-content: end;
    margin-top: 20px;
    padding-bottom: 20px;
}

.left {
    width: 500px;
    height: 730px;
}

.center {
    width: 350px;
    height: 730px;
    margin-left: 10px;
}

.right {
    width: 500px;
    height: 730px;
    margin-left: 10px;
}
</style>